<template>
    <div class="icons">
        <swiper :options="swiperOption">
          <swiper-slide v-for="(page,index) in pages" :key="index">
            <div class="icon" v-for="item in icons" :key="item.id">
               <img :src="item.imgUrl"/>
              <p>{{item.desc}}</p>
            </div>
          </swiper-slide>
          <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
    export default {
        name: "Icon",
        props : {
          icons:Array
        },
        data () {
           return {
             swiperOption:{
                pagination:".swiper-pagination"
             },
             // iconList:[
             //   {id:"0001",imgUrl:require("../../../assets/img/icon1.png"),desc:"景点门票"},
             //   {id:"0002",imgUrl:require("../../../assets/img/icon2.png"),desc:"北京必游"},
             //   {id:"0003",imgUrl:require("../../../assets/img/icon3.png"),desc:"一日游"},
             //   {id:"0004",imgUrl:require("../../../assets/img/icon4.png"),desc:"打卡圣地"},
             //   {id:"0005",imgUrl:require("../../../assets/img/icon5.png"),desc:"动植物园"},
             //   {id:"0006",imgUrl:require("../../../assets/img/icon6.png"),desc:"泡温泉"},
             //   {id:"0007",imgUrl:require("../../../assets/img/icon7.png"),desc:"野生动物园"},
             //   {id:"0008",imgUrl:require("../../../assets/img/icon8.png"),desc:"文化古迹"},
             //   {id:"0008",imgUrl:require("../../../assets/img/icon8.png"),desc:"文化古迹"},
             // ]
           }
        },
        computed:{//计算属性
          pages () {
             const pages=[]//定义数组
            //对每一项数据进行循环   index (下标)
            this.icons.forEach((item,index) => {
               const page=Math.floor(index / 8)
               if(!pages[page]){
                 pages[page]=[]
               }
               pages[page].push(item);
            })
            return pages;
          }

        }
    }
</script>

<style lang="stylus" scoped>
    .icons >>> .swiper-container{//撑开swiper的高度
      height:0;
      padding-bottom :50%;
    }
    .icons >>> .swiper-container-horizontal > .swiper-pagination-bullets{
      bottom :-1px;
    }
    .icons{
     // width: 100%
     // overflow:hidden;
     // height:0;
    //  padding-bottom :50%;
    //  border:1px solid green;
      .icon{
        float:left;
        width:25%;
        height:0;
        padding-bottom :25%;
        text-align :center;
        img{
          width:65%;
          margin-top :0.07rem;
        }
        p{
          color:#6f6f6f;
          margin-top :0.03rem;
          font-size :.12rem;
        }
      }
    }
</style>
